<template>
  <div>
    <Header></Header>
    <div style="background: #eee;">
      <!-- 面包屑导航 -->
      <div class="nav-wrap">
        <p class="nav-p-pc" style="margin-top:-25px;text-align:left;">
          <a href="/">课程列表</a>
          <span class="sharp-content">&gt;</span>
          <span class="nav-sec">账号设置</span>
        </p>
      </div>
    </div>
    <div id="settingForm">
      <el-form>
        <el-form-item label="头像"></el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            ref="upload"
            name="file"
            drag
            action="http://localhost:80/user/upload"
            :on-success="handleAvatarSuccess"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="name"></el-input>
        </el-form-item>
      </el-form>
      <el-button
        style="width:100%;margin:0px auto;background-color: #00B38A;font-size:20px"
        type="primary"
        @click="update"
      >确 定</el-button>
      <p></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "setting",
  data() {
    return {
      name: "",
      userid: "",
      portrait: ""
    };
  },
  mounted() {
  
    this.userid = this.$route.params.userid;
      console.log(this.userid);
  },
  methods: {
    update() {
      this.axios
        .get("http://localhost:80/user/updateUserInfo", {
          params: {
            name: this.name,
            userid: this.userid,
            portrait: this.portrait
          }
        })
        .then(result => {
          console.log(result);
          alert("个人信息修改成功");
          window.location.href = "http://localhost:8080/";
        })
        .catch(error => {
          this.$message.error("个人信息修改失败");
        });
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.portrait = "http://192.168.174.128/"+res.filePath;
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
div {
  display: block;
}
.nav-wrap {
  padding-top: 40px;
  height: 50px;
  background: #fff;
}
.nav-p-pc {
  font-size: 16px;
  margin: 17px auto;
  vertical-align: top;
  width: 750px;
}
.nav-p-pc a:active,
.nav-p-pc a:link,
.nav-p-pc a:visited {
  color: #666;
}
.nav-p-pc .sharp-content {
  color: #666;
  margin-left: 5px;
}
.nav-p-pc .nav-sec {
  margin-left: 5px;
  color: #999;
}
#settingForm {
  width: 700px;
  margin: 0 auto;
}
</style>
